
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>NASA</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="head">
  <div id="headMain" class="cf">
    <img src="img/nasa-logo.svg">
    <!-- 头部搜索框 -->
    <form action="" class="fr input">
      <input type="text" id="input" placeholder="Search">
    </form>

    <div>
      <ul class="navTop fr">
        <li><a href="#">Missions</a></li>
        <li><a href="#">Galleries</a></li>
        <li><a href="#">NASA TV</a></li>
        <li><a href="#">Follow NASA</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">NASA Audiences</a></li>
      </ul>
    </div>

    <!-- 头部下面的导航栏 -->
    <ul class="navBottom cf">
      <li><a href="#">Humans in Space</a></li>
      <li><a href="#">Moon to Mars</a></li>
      <li><a href="#">Earth</a></li>
      <li><a href="#">Space Tech</a></li>
      <li><a href="#">Flight</a></li>
      <li><a href="#">Solar System and Beyond</a></li>
      <li><a href="#">STEM Engagement</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Benefits to You</a></li>
    </ul>
  </div>
</div>
<!-- 主体的上面 -->
<div id="main" class="cf">
  <a href="#" class="left">
    <img src="img/pia21924-16.jpg" alt="">
    <p class="imgbtmo ibt">Mars Perseverance Rover</p>
    <p class="imgbtmo ibo">6 Things to Know About NASA's Ingenuity Mars Helicopter</p>
  </a>
  <a href="#" class="rightTopl">
    <img src="img/mollweide_cycle.jpg" alt="">
    <p class="imgbtmo ibt">Expedition 63</p>
    <p class="imgbtmf ibo">NASA Broadcasts Final Spacewalks to Upgrade Space Station Power System</p>
  </a>
  <div class="rightTopr">
    <h4>NASA Events</h4>
    <p><a href="#">Thurs., July 16, 6 a.m. EDT: International Space Station Spacewalk</a></p>
    <p><a href="#">Thurs., July 16, 8 a.m. EDT: NASA-ESA Briefing on First Images from Solar Orbiter</a></p>
    <p><a href="#">Tues., July 21, 6 a.m. EDT: International Space Station Spacewalk</a></p>
    <p><a href="#">Thu., July 23, 10 a.m. EDT: Coverage of the launch of the Progress 76 cargo ship to the International Space Station</a></p>
    <p><a href="#">No earlier than July 30: Launch of Mars 2020 Perseverance Rover</a></p>
    <p class="rightTopr-btm"><a href="#">NASA TV Schedule</a><a href="#">Launches and Landings</a></p>
  </div>
  <a href="#" class="rightBottom">
    <img src="img/s69-39961.jpg" alt="">
    <p class="imgbtmo ibo">July16,1969:Lift of Apollo 11</p>
  </a>
</div>
<!-- 主体的中间 -->

<div id="home">
  <div class="ihome">
    <img src="img/ssc2017-14a1.jpg" alt="">
    <p class="imgbtmo ibt"><a href="#">Image of the Day</a></p>
    <p class="Himgbtmo ibo"><a href="#">A Merger of Stars</a></p>
  </div>
  <div class="ihome">
    <img src="img/pia22556-16.gif" alt="">
    <p class="imgbtmo ibt"><a href="#">Asteroids</a></p>
    <p class="Himgbtmt ibo"><a href="#">Observatories Team Up to Reveal Rare Double Asteroid</a></p>
  </div>
  <div class="ihome">
    <img src="img/share.svg" alt="">
  </div>
</div>
<!-- 主体的底部 -->
<div id="bottom">
  <div class="ibtm">
    <img src="img/nasa_logo.png" alt="">
    <p class="imgbtmo ibt"><a href="#">About NASA</a></p>
    <p class="Himgbtmo ibo"><a href="#">NASA Statement on Nomination for Agency Deputy Administrator</a></p>
  </div>
  <div class="ibtm">
    <img src="img/io-home.gif" alt="">
    <p class="imgbtmo ibt"><a href="#">Juno</a></p>
    <p class="Himgbtmo ibo"><a href="#">NASA Juno Data Indicate Another Possible Volcano on Jupiter Moon Io</a></p>
  </div>
  <div class="ibtm">
    <img src="img/cassini20170809.jpg" alt="">
    <p class="imgbtmo ibt"><a href="#">Cassini</a></p>
    <p class="Himgbtmo ibo"><a href="#">NASA's Cassini Coverage Lands an Emmy Nomination</a></p>
  </div>


</div>
<!-- 底部更多 -->
<div id="more">
  <a href="#" class="morebtm">MORE STORIES</a>
</div>
<!-- 底部信息 -->
<div id="foot" class="cf">
  <div class="ffleft">
    <a href="#"><img src="img/nasa_logo.png" alt=""></a>
    <p class="ftext">National Aeronautics and Space Administration</p>
    <p class="ftext">NASA Official: Brian Dunbar</p>
  </div>
  <ul class="fright">
    <li><a href="#">No Fear Act</a></li>
    <li><a href="#">FOIA</a></li>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Office of Inspector General</a></li>
    <li><a href="#">Office of Special Counsel</a></li>
    <li><a href="#">Agency Financial Reports</a></li>
    <li><a href="#">Contact NASA</a></li>
  </ul>
</div>
</body>
</html>



